import {messages} from "share/common";
import React, { Component, PropTypes } from 'react'
import {connect} from 'react-redux'
import TitleHoc from 'containers/setting/allocate-center/template/title-hoc';
import ResizeTable from 'components/resize-table';
import SlideFrame from 'components/slide-frame';
import AddDesk from "containers/setting/allocate-center/template//add-desk";
import AllocateServices from 'containers/setting/allocate-center/allocate-services'
import { Button, Spin, message } from 'antd';

class PaymentDesk extends Component{

  state = {
    basicColumns: [
      { title: messages('setting.key2146')/*应用范围*/, dataIndex: 'scopeName' },
      { title: messages('common.operation')/*操作*/, dataIndex: 'operator',
        render: (value, record) => {
          return <span>
            <a onClick={() => this.handleEdit(record)}>{messages('common.edit')/*编辑*/}</a>
            <span className="ant-divider"/>
            <a onClick={() => this.handleDelete(record)}>{messages('common.delete')/*删除*/}</a>
          </span>
        } }
    ],
    loading: false,
    pagination: { total: 0 },
    showSlideFrame: false,
    title: '',
    editRecord: [],
    columns: [],
    data: [],
    initObject: []
  };

  componentDidMount(){
    this.initTable();
  }

  componentWillReceiveProps(nextProps){
    this.initTable(nextProps)
  }

  initTable = nextProps => {
    const { setOfBooksId, categoryItemCode } = nextProps || this.props;
    const { basicColumns } = this.state;
    this.setState({ loading: true });
    AllocateServices.getTableList({ setOfBooksId, categoryItemCode }).then(res => {
      let temp = [];
      res.data.columnDef.map((item, index) => {
        temp.push({
          title: item.columnShowName,
          dataIndex: `itemDtos-${index}`,
          render: (value, record) => {
            let res = [];
            record.itemDtos && record.itemDtos[item.columnCode].map(it => {
              res.push(it.showName);
            });
            return res.join(',');
          } });
      });
      this.setState({
        columns: temp.concat(basicColumns),
        data: res.data.itemDtos || [],
        loading: false,
        initObject: res.data.columnDef
      });
    }).catch(e => {
      this.setState({ loading: false });
      message.error(e.response.data.message);
    });
  };

  handleAdd = () => {
    this.setState({ title: messages('setting.key786')/*新建规则*/, editRecord: [] }, () => {
      this.setState( { showSlideFrame: true } );
    })
  };

  handleDelete = record => {
    AllocateServices.deleteRule({ ruleId: record.ruleId }).then(() => {
      message.success(messages('common.delete.successful')/*删除成功*/);
      this.initTable();
    }).catch(e => {
      message.error(e.response.data.message);
    })
  };

  handleEdit = record => {
    this.setState({ title: messages('setting.key1192')/*编辑规则*/, editRecord: record }, () => {
      this.setState( { showSlideFrame: true } );
    })
  };

  isRefresh = isRefresh => {
    this.setState({showSlideFrame: false});
    isRefresh === true && this.initTable();
  };

  render(){
    const { columns, loading, pagination, data, showSlideFrame, title, editRecord, initObject } = this.state;
    const { categoryItemCode, setOfBooksId } = this.props;
    return(
      <Spin spinning={loading}>
        {this.props.getTitle(categoryItemCode)}
        <Button type={'primary'} onClick={this.handleAdd} style={{ marginBottom: '15px' }}>{messages('common.create')/*新建*/}</Button>
        <ResizeTable
          columns={columns}
          dataSource={data}
          rowKey={'ruleId'}
          pagination={pagination}
          bordered
        />
        <SlideFrame
          show={showSlideFrame}
          title={title}
          params={{
            showSlideFrame,
            editRecord,
            categoryItemCode,
            initObject,
            setOfBooksId
          }}
          content={AddDesk}
          onClose={(isRefresh) => this.isRefresh(isRefresh)}
          afterClose={(isRefresh) => this.isRefresh(isRefresh)}
        />
      </Spin>
    )
  }

  static propTypes = {
    setOfBooksId: PropTypes.string,
    categoryItemCode: PropTypes.string
  }
}

function mapStateToProps(state){
  return {

  }
}

const WrappedComponent = TitleHoc(PaymentDesk);
export default connect(mapStateToProps)(WrappedComponent);
